<template>
    <div class="data-home">
        <section class="data-home-l">
            <div class="c-title">
                <span>应用统计</span>
            </div>
            <div class="count-details bgc1">
                <ul class="clear">
                    <li v-for="(item, index) of appCountData" :key="index">
                        <span class="app-sum">{{ item.app_num }}</span>
                        <span class="app-name">{{ item.app_type_name }}</span>
                    </li>
                </ul>
                <div
                    v-if="
                        appCountData !== undefined && appCountData.length == 0
                    "
                    class="no-data-tips"
                >
                    - 暂无数据 -
                </div>
            </div>
            <div class="c-title">
                <span>应用访问总量</span>
            </div>
            <div class="visits-map bgc1">
                <lineChart
                    v-if="visitChartFlag == true"
                    id="visits-chart"
                    style="width: 100%;height:100%;"
                    :chartData.sync="visitChartData"
                />
                <div v-else class="no-data-tips">- 暂无数据 -</div>
            </div>
            <div class="c-title">
                <span>应用访问比例</span>
            </div>
            <div class="percent-map bgc1">
                <ul>
                    <li v-for="(item, index) of visitRateData" :key="index">
                        <p class="clear">
                            <span class="percent-name fl">{{
                                item.app_type_name
                            }}</span>
                            <span class="percentage fr"
                                >{{ item.percent }}%</span
                            >
                        </p>
                        <el-progress
                            :show-text="false"
                            :stroke-width="24"
                            :percentage="item.percent"
                        ></el-progress>
                    </li>
                </ul>
                <div
                    v-if="
                        visitRateData !== undefined && visitRateData.length == 0
                    "
                    class="no-data-tips"
                >
                    - 暂无数据 -
                </div>
            </div>
            <div class="c-title">
                <span>最新上传资源</span>
            </div>
            <div class="new-resource bgc1">
                <div
                    class="resource-carousel"
                    v-if="
                        newResourceData !== undefined &&
                            newResourceData.length > 0
                    "
                >
                    <template>
                        <el-carousel
                            height="146px"
                            direction="vertical"
                            indicator-position="none"
                        >
                            <el-carousel-item
                                v-for="(item, index) in newResourceData"
                                :key="index"
                            >
                                <div class="carousel-item">
                                    <div class="box clear">
                                        <img
                                            :src="BASE_URL + item.avatar_path"
                                            alt="头像"
                                        />
                                        <div class="info">
                                            <p class="title1" :title="item.create_name">
                                                {{ item.create_name }}
                                            </p>
                                            <p class="title2" title="22">
                                                上传了{{
                                                    item.grade_name
                                                }}课件《{{ item.name }}》
                                            </p>
                                        </div>
                                    </div>
                                    <p class="time-box">
                                        {{ getDateDiff(item.create_time) }}
                                    </p>
                                </div>
                            </el-carousel-item>
                        </el-carousel>
                    </template>
                </div>
                <div v-else class="no-data-tips">- 暂无数据 -</div>
            </div>
        </section>
        <section class="data-home-m">
            <div class="general-view bgc1">
                <h2 class="general-view-title">数据概览</h2>
                <div class="general-map-box">
                    <ChinaChart
                        v-if="mapFlag"
                        id="general-map"
                        style="width: 100%;height:100%;"
                        :ChinaOption="overviewData"
                    />
                </div>
                <p class="date-string">
                    {{ formatTime1(new Date().toDateString()) }}
                </p>
            </div>
            <div class="c-title">
                <span>单应用访问人数</span>
                <i class="recently">(近7天)</i>
            </div>
            <div class="count-details-l bgc1">
                <swiper :options="swiperOption" class="data-home-swiper">
                    <swiper-slide
                        v-for="(item, index) in singleAppVisitData"
                        :key="index"
                    >
                        <span class="app-sum">{{ item.app_num }}</span>
                        <span class="app-name">{{ item.app_name }}</span>
                    </swiper-slide>
                </swiper>
                <div v-if="singleAppVisitData.length == 0" class="no-data-tips">
                    - 暂无数据 -
                </div>
            </div>
        </section>
        <section class="data-home-r">
            <div class="c-title">
                <span>用户统计</span>
            </div>
            <div class="users-count bgc1">
                <ul class="clear">
                    <li>
                        <span class="app-sum">{{ userData.total_num }}</span>
                        <span class="app-name">用户总数</span>
                    </li>
                    <li>
                        <span class="app-sum">{{ userData.teacher_num }}</span>
                        <span class="app-name">教师</span>
                    </li>
                    <li>
                        <span class="app-sum">{{ userData.student_num }}</span>
                        <span class="app-name">学生</span>
                    </li>
                </ul>
            </div>
            <div class="c-title">
                <span>用户性别分析</span>
            </div>
            <div class="gender-map circle bgc1">
                <div class="circle-l">
                    <div class="container">
                        <div class="data">
                            <el-progress
                                type="circle"
                                color="#08DBFF"
                                :stroke-width="12"
                                :percentage="Math.round(userData.male_percent)"
                            ></el-progress>
                        </div>
                        <div class="title">
                            <p>男性</p>
                            <p>{{ Math.round(userData.male_num) }}</p>
                        </div>
                    </div>
                </div>
                <div class="circle-r">
                    <div class="container">
                        <div class="data">
                            <el-progress
                                type="circle"
                                color="#FF46CE"
                                :stroke-width="12"
                                :percentage="
                                    Math.round(userData.female_percent)
                                "
                            ></el-progress>
                        </div>
                        <div class="title">
                            <p>女性</p>
                            <p>{{ Math.round(userData.female_num) }}</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="c-title">
                <span>布置作业教师排行</span>
            </div>
            <div class="homeWork-map bgc1">
                <rankingChart
                    v-if="rankChartFlag == true"
                    id="ranking-chart"
                    style="width: 100%;height:100%;"
                    :option="teacherRankData"
                ></rankingChart>
                <div v-else class="no-data-tips">- 暂无数据 -</div>
            </div>
            <div class="c-title">
                <span>公告栏</span>
            </div>
            <div class="bulletin bgc1">
                <ul>
                    <li
                        class="clear"
                        v-for="(item, index) of noticeData"
                        :key="index"
                    >
                        <span class="reason fl">{{ item.name }}</span>
                        <span class="date fr">{{ item.create_time }}</span>
                    </li>
                </ul>
                <div v-if="noticeData.length == 0" class="no-data-tips">
                    - 暂无数据 -
                </div>
            </div>
        </section>
    </div>
</template>
<script>
//应用访问总量、数据概览、布置作业教师排行功能模块分别引入对应的公用图形组件：
import lineChart from "../Charts/lineChart";
import ChinaChart from "../Charts/ChinaChart";
import rankingChart from "../Charts/rankingChart";
// 引用大数据js里面的2个公用函数
import {
    getPassData,
    changeSimpleDate
} from "../../../assets/js/charts/chartsTool.js";
import { setInterval, clearInterval } from "timers";
// 引入轮播图
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
    components: {
        lineChart,
        ChinaChart,
        rankingChart,
        swiper,
        swiperSlide
    },
    props: ["platformId"], //上级页面传来的平台id
    data() {
        return {
            appCountData: [], //应用统计
            //应用访问总量图表数据
            visitChartData: {
                timeTitle: "", //最近7天日期字符串
                dateData: [], //日期数组
                countData: [] //访问量数组
            },
            visitChartFlag: false, //是否显示应用访问总量图表
            visitRateData: [], //访问比例
            newResourceData: [], //最新上传资源
            singleAppVisitData: [], //单应用访问人数
            //数据概览：
            mapFlag: true,
            overviewData: [], //新用户登录数据
            ChinaMapInterval: null, //轮询计时器
            //用户统计&用户性别分析
            userData: {
                female_num: 0, //女性
                female_percent: 0, //女性占比
                male_num: 0, //男性
                male_percent: 0, //男性占比
                student_num: 0, //学生
                teacher_num: 0, //教师
                total_num: 0 //用户总数
            },
            //布置作业教师排名数据
            teacherRankData: {
                xAxisData: [], //x轴）教师名字数组
                yAxisData: [] //（y轴）布置次数
            },
            rankChartFlag: false, //是否显示布置作业教师排名图表
            noticeData: [], //公告数据
            //   应用访问人数部分，轮播图效果参数：
            swiperOption: {
                slidesPerView: 10, //每行排列个数
                slidesPerColumn: 2, //排列成2行
                spaceBetween: 0, //间距
                loop: true,
                autoplay: true, //自动播放
                delay: 5000 //切换时间间隔
            }
        };
    },
    created() {},
    watch: {
        //上级页面传来的平台id值
        platformId: {
            handler(a, b) {
                if (a != "") {
                    this.getUserCount();
                    this.getAppCount();
                    this.getAppVisitCount();
                    this.getVisitRate();
                    this.getSingleAppVisit();
                    this.getNewResource();
                    this.getTeacherRank();
                    this.getNotice();
                    this.ChinaMapInterval = setInterval(() => {
                        this.getOverviewData();
                    }, 5000);
                }
            },
            immediate: true
        }
    },
    mounted() {},
    beforeDestroy() {
        clearInterval(this.ChinaMapInterval);
    },
    methods: {
        // 应用统计(首页此处只显示4项即可)
        getAppCount() {
            let success = res => {
                if (!is_empty(res.data) && res.data.data.length > 4) {
                    this.appCountData = res.data.data.slice(0, 4);
                } else {
                    this.appCountData = res.data.data;
                }
            };
            this.$ajax.get("api/bigdata/app_countdata", {
                params: {
                    platform_id: this.platformId
                },
                func: { success: success }
            });
        },

        //应用访问总量（最近7天的）
        getAppVisitCount() {
            let success = res => {
                if (!is_empty(res.data)) {
                    this.visitChartData.yAxisName = "访问量";
                    this.visitChartData.timeTitle =
                        getPassData(6, "/") + "-" + getPassData(0, "/"); //最近7天日期字符串
                    let dataArr = res.data.data;
                    for (let inx in dataArr) {
                        this.visitChartData.dateData.push(
                            changeSimpleDate(dataArr[inx].key)
                        ); //日期数组，用于图表横坐标
                        this.visitChartData.countData.push(
                            dataArr[inx].time_value
                        ); //访问量数组，用于图表纵坐标
                    }
                    this.visitChartFlag = true; //显示图表
                }
            };
            this.$ajax.get("api/bigdata/app_visitdata", {
                params: {
                    start_time: getPassData(6, "-"),
                    end_time: getPassData(0, "-"),
                    page: 1,
                    platform_id: this.platformId
                },
                func: { success: success }
            });
        },
        // 应用访问比例(此处只显示4项)
        getVisitRate() {
            let success = res => {
                if (!is_empty(res.data) && res.data.data.length > 4) {
                    this.visitRateData = res.data.data.slice(0, 4);
                } else {
                    this.visitRateData = res.data.data;
                }
            };
            this.$ajax({
                url: "api/bigdata/app_othercount",
                method: "get",
                params: {
                    platform_id: this.platformId
                },
                func: { success: success }
            });
        },
        //最近7天 单应用访问人次
        getSingleAppVisit() {
            let success = res => {
                this.singleAppVisitData = res.data;
            };
            this.$ajax({
                url: "api/bigdata/app_singlevisitdata",
                method: "get",
                params: {
                    start_time: getPassData(6, "-"),
                    end_time: getPassData(0, "-"),
                    page: 1,
                    platform_id: this.platformId
                },
                func: { success: success }
            });
        },
        // 最新上传资源
        getNewResource() {
            let success = res => {
                this.newResourceData = res.data;
            };
            this.$ajax.get("api/bigdata/resource_latestupdatedata", {
                params: {
                    platform_id: this.platformId
                },
                func: { success: success }
            });
        },
        // 数据概况
        getOverviewData() {
            let success = res => {
                if (is_empty(res.data)&&!is_empty(this.overviewData)) {
                    this.mapFlag = false;
                }
                setTimeout(() => {
                    this.overviewData = res.data;
                    this.mapFlag = true;
                },10);
                // console.log(this.overviewData)
            };
            this.$ajax({
                url: "api/bigdata/latestloginuser",
                method: "get",
                params: {
                    platform_id: this.platformId
                },
                func: { success: success }
            });
        },
        // 用户统计
        getUserCount() {
            let success = res => {
                if (!is_empty(res.data)) {
                    this.userData = res.data;
                }
            };
            this.$ajax({
                url: "api/bigdata/index_userdata",
                method: "get",
                params: {
                    platform_id: this.platformId
                },
                func: { success: success }
            });
        },
        // 获取布置作业教师排行
        getTeacherRank() {
            let success = res => {
                if (!is_empty(res.data.data)) {
                    res.data.data.forEach((item, index) => {
                        //只显示排行的前5名
                        if (index < 5) {
                            this.teacherRankData.xAxisData.push(item.user_name);
                            this.teacherRankData.yAxisData.push(item.add_num);
                        }
                    });
                    this.rankChartFlag = true;
                } else {
                    this.teacherRankData = {
                        xAxisData: [],
                        yAxisData: []
                    };
                    this.rankChartFlag = false;
                }
            };
            this.$ajax.get("api/bigdata/research_teacherdata", {
                params: {
                    platform_id: this.platformId
                },
                func: { success: success }
            });
        },
        // 获取公告
        getNotice() {
            let success = res => {
                this.noticeData = res.data;
            };
            this.$ajax.get("api/bigdata/news", {
                params: {
                    platform_id: this.platformId
                },
                func: { success: success }
            });
        }
    }
};
</script>
<style lang="scss">
.data-home-swiper {
    .swiper-slide {
        height: 73px;
        text-align: center;
        .app-sum {
            display: block;
            font-size: calc(16px + (800vw - 10928px) / 554);
            font-weight: 700;
            color: #73baff;
            margin: 18px 0 14px;
        }
        .app-name {
            display: block;
            font-size: calc(14px + (200vw - 2732px) / 554);
            font-weight: 500;
            color: #fff;
        }
    }
}
</style>
